<template>
    <div id='detail'>
     <van-nav-bar
    left-text="返回"
    left-arrow
    @click-left="onClickLeft" 
  /> 
    <swiper :options="swiperOption" style="margin-top:-0.1rem">
    <!-- slides -->
    <swiper-slide>
       <img src="//img13.360buyimg.com/n1/jfs/t1/82640/14/8943/89039/5d6cc576Ea0f0bce1/ac5de32b6c615b05.jpg">
    </swiper-slide>
    <swiper-slide>
       <img src="//img13.360buyimg.com/n1/jfs/t1/45988/33/9426/122762/5d6cc57aE6780f00e/b935b6dbd5dd9ee7.jpg">
    </swiper-slide>
    <swiper-slide>
       <img src="//img13.360buyimg.com/n1/jfs/t1/55746/5/9365/79400/5d6cc57aEeb22a775/db593d14260db75d.jpg">
    </swiper-slide>
    <swiper-slide>
       <img src="//img13.360buyimg.com/n1/jfs/t1/70394/1/8895/97656/5d6cc589E1aa67b5b/d743dd6b728f9245.jpg">
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>  
    <div id="box">
     <div class="rmb">¥</div>
     <div class="price">{{price.toFixed(2)}}</div>

    <div class="right">
     <div class="icons1">
       <van-icon name="gold-coin-o" />
       <p>降价通知</p>
     </div>
     <div class="icons2">
       <van-icon name="like-o" />
       <p>关注</p>
     </div>
   </div>  
    </div> 
     <div class="font">
     <p>爱森 冷鲜猪肉生猪肉小五花 五花肉500克/盒</p>

     </div>
    <van-cell-group style="margin-top:0.5rem">
    <van-cell title="优惠" value="领立减80元优惠券"></van-cell>
    </van-cell-group>

    <van-cell-group style="margin-top:0.5rem">
    <van-cell title="活动" value="多单有礼"></van-cell>
    </van-cell-group>

    <van-goods-action>
    <van-goods-action-icon icon="chat-o" text="客服" dot />
    <van-goods-action-icon icon="cart-o" text="购物车" :badge="goodsNum > 0 ? goodsNum : ''" @click="toshopcart()"/>
    <van-goods-action-icon icon="shop-o" text="店铺" />
    <van-goods-action-button type="warning" text="加入购物车" @click="addToCart(product,'warning')"/>
    <van-goods-action-button type="danger" text="立即购买" @click="addToCart(product,'danger')"/>
    </van-goods-action>

    <div class="detail">
        <p>详情</p>
    </div>
     <img src="http://img14.360buyimg.com/imgzone/jfs/t1/88225/7/12470/74906/5e4662f4E17788e22/accf694c691e94dc.jpg" alt="">   
     <img src="https://img.alicdn.com/imgextra/i2/2097751486/O1CN01WV4qDi1Mqd9G6BwIw_!!2097751486.jpg" alt="">    
    </div>
    
</template>

<script>
import {getHomeData} from './../../../service/api/index'
import PubSub from 'pubsub-js';
import {mapState,mapMutations,mapActions} from 'vuex'
export default {
    data(){
        return{
             swiperOption:{
                  pagination:{
                      el:'.swiper-pagination'
                  },
                  loop:true
              },
              product:this.$route.query.product,  //从路由里面获取到相关的产品详情
              price:40.80
        }
    },
    computed:{
       
        ...mapState(['shopCart','userInfo']),
        goodsNum(){
            console.log("===========xxx",this.$route.query.product);//从路由取到的参数
            if(this.shopCart){
                // 总的购物车商品数量
               let num =0;
               Object.values(this.shopCart).forEach((goods,index)=>{
                   num+=goods.num
               });
               return num
            }else{
               return 0;
            }
        }
    },
    methods:{
        onClickLeft(){
             this.$router.back();
        },
        addToCart(goods,type){
             if(type==='warning'){              
                PubSub.publish('homeAddToCart', goods);
             }else{
                this.$router.push('/confirmOrder')
             }
        },
        toshopcart(){
             this.$router.push('/dashboard/cart');
        }   
    }
}
</script>

<style scoped>
#detail{
     position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #f5f5f5;
        z-index: 200;
    }
   img{
        width: 100%;
    }
   #box{
       margin-top:-0.3rem;
       overflow: hidden;
       width: 100%;
       height: 3rem;
       background-color: #ffffff;
   }
   .rmb{
      color: crimson;
      font-size: 1rem;
      margin-left: 0.8rem;
      margin-top:1rem;
      float: left;
   }
   .price{
       float: left;
       font-size: 2rem;
       color: crimson;
       margin-left:2px
   }
   .right{
       float: right;    
       width: 30%;  
   }
  .icons1{
      float: left
  }
  .icons2{
      float: right;
      margin-right: 0.5rem;
  }
  .icons1>p{
   
	font-size:.28rem;
	text-align: center;
	color: #212121;
  }
  .icons2>p{
    
	font-size:.28rem;
	text-align: center;
	color: #212121;
  }
  .van-icon-gold-coin-o::before{
      margin-left: 0.75rem;
  }
  .van-icon-like-o::before{
      margin-left: 0.1rem;
  }
  .font>p{
      font:700 16px Arial,"microsoft yahei";
      margin-left:0.8rem;
  }
  .font{
   background-color: #ffffff;
  }
  .detail{
      width: 100%;
      height: 2.5rem;
      font-size: 0.8rem;
      line-height: 2.5rem; 
  }
  .swiper-slide img{
      height: 249px;
  }
</style>